import { Component, Vue } from 'vue-property-decorator'
import { PAGE, SEARCH } from '@/store/modules/crud/keys'
import { AppState } from '@/store/modules/app/typings'
import { CrudState } from '@/store/modules/crud/typings'

@Component
export default class TableMixin extends Vue {
  get _name() {
    return 'mixin'
  }

  get appState() {
    return this.$store.state.app as AppState
  }

  get state() {
    return this.$store.state.crud[this._name] as CrudState
  }

  get page() {
    return this.state.page
  }

  get dic() {
    return this.state.dic
  }

  get info(){
        return this.state.info
  }
  
  get pending() {
    return this.appState.pending[`${this._name}/${PAGE}`]
  }

  created () {
    this.$store.dispatch(PAGE, { name: this._name })
  }

  _beforeRefresh(e: any){}
   
  pageChange (page: number) {
    this.$store.commit(SEARCH, { name: this._name, key: 'page', value: page - 1 })
    this.$store.dispatch(PAGE, { name: this._name })
  }

  pageSizeChange (size: number) {
    this.$store.commit(SEARCH, { name: this._name, params: { page: 0, size } })
    this.$store.dispatch(PAGE, { name: this._name })
  }
}